{% render 'text-shadow', id: section.id, ammount: section.settings.text_shadow_ammount %}

{%- liquid
  case section.settings.desktop_text_position
    when 'top_left'
      assign desktop_text_position = 'align-items-md-start justify-content-md-start'
    when 'top_center'
      assign desktop_text_position = 'align-items-md-start justify-content-md-center'
    when 'top_right'
      assign desktop_text_position = 'align-items-md-start justify-content-md-end'
    when 'middle_left'
      assign desktop_text_position = 'align-items-md-center justify-content-md-start'
    when 'middle_center'
      assign desktop_text_position = 'align-items-md-center justify-content-md-center'
    when 'middle_right'
      assign desktop_text_position = 'align-items-md-center justify-content-md-end'
    when 'bottom_left'
      assign desktop_text_position = 'align-items-md-end justify-content-md-start'
    when 'bottom_center'
      assign desktop_text_position = 'align-items-md-end justify-content-md-center'
    when 'bottom_right'
      assign desktop_text_position = 'align-items-md-end justify-content-md-end'
    else
      assign desktop_text_position = ''
  endcase
%}

{%- liquid
  case section.settings.mobile_text_position
    when 'top'
      assign mobile_text_position = 'align-items-start'
    when 'center'
      assign mobile_text_position = 'align-items-center'
    when 'bottom'
      assign mobile_text_position = 'align-items-end'
    else
      assign mobile_text_position = ''
  endcase
%}

{%- liquid
  case section.settings.desktop_text_alignment
    when 'left'
      assign desktop_text_alignment = 'text-md-start'
    when 'center'
      assign desktop_text_alignment = 'text-md-center'
    when 'right'
      assign desktop_text_alignment = 'text-md-end'
    else
      assign desktop_text_alignment = ''
  endcase

  case section.settings.mobile_text_alignment
    when 'left'
      assign text_alignment =  desktop_text_alignment | append: ' text-start'
    when 'center'
      assign text_alignment = desktop_text_alignment | append: ' text-center'
    when 'right'
      assign text_alignment = desktop_text_alignment | append: ' text-end'
    else
      assign text_alignment = desktop_text_alignment | append: ''
  endcase
%}

{%- liquid
  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase
%}

{%- liquid
  for block in section.blocks
    case block.type
      when 'button'
        case block.settings.button_set_style
          when 'solid_with_outline'
            assign first_button_class = 'mx-1 btn-primary'
            assign second_button_class = 'mx-1 btn-outline-' | append: btn_style
            assign parent_class = 'mx-n1'
          when 'solid_with_text_link'
            assign first_button_class = 'mx-2 btn-primary'
            assign second_button_class = 'mx-2 btn-link link-' | append: btn_style
            assign parent_class = 'mx-n2'
          when 'outline'
            assign first_button_class = 'mx-1 btn-outline-' | append: btn_style
            assign second_button_class = 'mx-1 btn-outline-' | append: btn_style
            assign parent_class = 'mx-n1'
      
          when 'outline_with_text_link'
            assign first_button_class = 'mx-2 btn-outline-' | append: btn_style
            assign second_button_class = 'mx-2 btn-link link-' | append: btn_style
            assign parent_class = 'mx-n2'
          when 'text_link'
            assign first_button_class = 'mx-2 btn-link link-' | append: btn_style
            assign second_button_class = 'mx-2 btn-link link-' | append: btn_style
            assign parent_class = 'mx-n2'
        endcase
    endcase
  endfor
%}

{%- liquid
  case section.settings.desktop_video_height
    when 'small'
      assign pc_video_height = 'height-md-6'
      assign iframe_pc_style = 'iframe-md-small'
    when 'medium'
      assign pc_video_height = 'height-md-8'
      assign iframe_pc_style = 'iframe-md-medium'
    when 'large'
      assign pc_video_height = 'height-md-10'
      assign iframe_pc_style = 'iframe-md-large'
    when 'adapt_to_video'
      assign pc_video_height = 'h-md-auto'
      assign iframe_pc_style = 'iframe-md-video'
      assign iframe_placeholder = 'ratio ratio-16x9'
    when 'adapt_to_screen'
      assign pc_video_height = 'h-md-adapt-to-screen as-md-full-screen'
      assign iframe_pc_style = 'iframe-md-screen'
  endcase

  case section.settings.mobile_video_height
    when 'small'
      assign mb_video_height = 'height-6'
      assign iframe_style = 'iframe-small'
    when 'medium'
      assign mb_video_height = 'height-8'
      assign iframe_style = 'iframe-medium'
    when 'large'
      assign mb_video_height = 'height-10'
      assign iframe_style = 'iframe-large'
    when 'adapt_to_video'
      assign mb_video_height = 'h-auto'
      assign iframe_style = 'iframe-video'
      if section.settings.desktop_video_height != adapt_to_video
        assign iframe_placeholder = 'ratio ratio-16x9'
      endif
    when 'adapt_to_screen'
      assign mb_video_height = 'h-adapt-to-screen as-full-screen'
      assign iframe_style = 'iframe-screen'
  endcase
%}

{%- liquid
  case section.settings.fontsize
    when 'display-4'
      assign oversize = 'fs-5'
      assign mark = 'h2'
      assign subsize = 'fs-3'
      assign bodysize = 'fs-5'
    when 'display-5'
      assign oversize = 'fs-6'
      assign mark = 'h2'
      assign subsize = 'fs-4'
      assign bodysize = 'fs-6'
    when 'h1'
      assign oversize = ''
      assign mark = 'h3'
      assign subsize = 'fs-5'
      assign bodysize = ''
    when 'h2'
      assign oversize = ''
      assign mark = 'h4'
      assign subsize = 'fs-6'
      assign bodysize = ''
    when 'h3'
      assign oversize = ''
      assign mark = 'h5'
      assign subsize = ''
      assign bodysize = ''
  endcase
-%}

<div class="banner-{{ section.id }}">
  <input type="hidden" value="{{ section.settings.enable_transparent_header }}" class="as-header-enable-transparent">
  <div>
    <div class="container-topic px-0 position-relative as-video-wrap ">
      <div class="position-relative hero-video overflow-hidden {{ mb_video_height }} {{ pc_video_height }}" style="font-size: 0px;margin-bottom: -1px;">
        {% if section.settings.video_url != blank or section.settings.mobile_video_url != blank %}
          {% if section.settings.video_url contains '.mp4' or section.settings.mobile_video_url contains '.mp4' %}
            <video data-type="mp4"
              loop muted playsinline webkit-playsinline autoplay
              poster="{{ section.settings.cover_image_on_desktop | img_url: 'master' }}"
              class="w-100 {{ mb_video_height }} {{ pc_video_height }} object-fit-cover as-video-pc d-md-block d-none" 
              data-pc-video="{{ section.settings.video_url }}"
              data-mob-video="{% if section.settings.mobile_video_url != blank %} {{ section.settings.mobile_video_url }} {% else %} {{ section.settings.video_url }} {% endif %}">
            </video> 
            <video data-type="mp4"
              loop muted playsinline webkit-playsinline autoplay
              poster="{{ section.settings.cover_image_on_mobile | img_url: 'master' }}"
              class="w-100 {{ mb_video_height }} {{ pc_video_height }} object-fit-cover as-video-mob d-md-none d-block" 
              data-pc-video="{{ section.settings.video_url }}"
              data-mob-video="{% if section.settings.mobile_video_url != blank %} {{ section.settings.mobile_video_url }} {% else %} {{ section.settings.video_url }} {% endif %}">
            </video> 
            <div class="as-icon-muted-wrapper bg-gray-100 bottom-0 d-inline-block end-0 p-2 me-3 mb-3 rounded-pill position-absolute cursor-pointer" bis_skin_checked="1" style="z-index: 2;">
              <span class="as-icon-muted icon-muted">{% render 'icon-muted' %}</span>
              <span class="as-icon-unmuted icon-unmute d-none">{%  render 'icon-unmuted' %}</span>
            </div>
          {% endif %}
        {% else %}
          <div class="object-fit-cover img-placeholder h-100">
            {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
          </div>
        {% endif %}
      </div>
      <div class="absolute-center">
        <div class="container h-100 py-section position-relative">
          <div class="row h-100 {{ mobile_text_position }} justify-content-center {{ desktop_text_position }}">
            <div class="{{ section.settings.text_width }} col-12 mt-n2 {{ text_alignment }} {{ text_color }}">
              <div class="wrapper hero-text-shadow-overlay-{{ section.id }} with-stretched-link text-content">
              {% assign subline_blocks = section.blocks | where: 'type', 'subline' %}
              {%- for block in section.blocks -%}
                {%- case block.type -%}
                  {%- when 'overline' -%}
                    {%- if block.settings.overline != blank -%}
                      <p class="overline fs-5 mb-0 mt-2">{{ block.settings.overline }}</span></p>
                    {%- endif -%}
                  {%- when 'heading' -%}
                    {%- if block.settings.heading != empty -%}
                      <h2 class="heading display-4 mb-0 fw-bold">{{ block.settings.heading }}</h2>
                    {%- endif -%}
                  {%- when 'subline' -%}
                    {%- if block.settings.subline != blank -%}
                      <div class="subline fs-3 mt-2 mb-0 no-last-margin richtext-with-link {{ richtext_link_style }}">
                        {{ block.settings.subline }}
                      </div>
                    {%- endif -%}
                  {%- when 'text' -%}
                    {%- if block.settings.text != blank -%}
                      <div class="description fs-5 mb-0 {% if subline_blocks.size > 0 %}mt-md-5 mt-4{% else %}mt-2{% endif %} no-last-margin richtext-with-link {{ richtext_link_style }}">
                        {{ block.settings.text }}
                      </div>
                    {%- endif -%}
                  {%- when 'image' -%}
                    {%- style -%}
                      .{{ section.id }}-block-img {
                        width: 70%;
                        height: auto;
                      }
                      @media (min-width: 576px) {
                        .{{ section.id }}-block-img {
                          width: {{ block.settings.image_rate | times: 0.8 }}%;
                          height: auto;
                        }
                      }
                      @media (min-width: 1152px) {
                        .{{ section.id }}-block-img {
                          width: {{ block.settings.image_rate }}%;
                          height: auto;
                        }
                      }
                    {%- endstyle -%}
                    <div class="h-100 ">
                      <picture >
                        {% if block.settings.mobile_image != blank %}
                          <source media="(max-width: 767px)" sizes="(max-width: 767px) 100vw, 767px" 
                            srcset="{{ block.settings.mobile_image | img_url: 'master' }}">
                        {% endif %}
                        {% if block.settings.desktop_image != blank %}
                          <img
                            class="{{ section.id }}-block-img"
                            width = '{{ block.settings.desktop_image.width | divided_by: 2 }}'
                            height = '{{ block.settings.desktop_image.height | divided_by: 2 }}'
                            srcset="{{ block.settings.desktop_image | img_url: 'master' }}"
                            src="{{ block.settings.desktop_image | img_url: 'master' }}"
                            loading="lazy"
                            alt="{{ section.settings.desktop_image.alt | escape }}" >
                        {% endif %}
                        {% if block.settings.desktop_image == blank and block.settings.mobile_image == blank %} 
                          <div class="object-fit-cover position-absolute w-100 img-placeholder h-100">
                            {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
                          </div>
                        {% endif %}
                      </picture>
                    </div>
                    
                  {%- when 'button' -%}
                    <div class="mt-md-5 mt-4">
                      <div class="mt-n2 {{ parent_class }}">
                        {%- if block.settings.button_label_1 != blank -%}
                          <a {% if block.settings.button_link_1 contains 'youtu.be' or block.settings.button_link_1 contains 'youtube' %}data-bs-toggle="modal" data-bs-target="#youtubeVideoModal" {% else %} {% render 'link', link: block.settings.button_link_1 %} href="{{ block.settings.button_link_1 }}" {% endif %}
                            class="btn {{ first_button_class }} with-stretched-link mt-2">
                            {{ block.settings.button_label_1 }}
                          </a>
                        {%- endif -%}
                        {%- if block.settings.button_label_2 != blank -%}
                        <a {% if block.settings.button_link_2 contains 'youtu.be' or block.settings.button_link_2 contains 'youtube' %}data-bs-toggle="modal" data-bs-target="#youtubeVideoModal2" {% else %} {% render 'link', link: block.settings.button_link_2 %} href="{{ block.settings.button_link_2 }}" {% endif %}
                          class="btn {{ second_button_class }} with-stretched-link mt-2">
                          {{ block.settings.button_label_2 }}
                        </a>
                        {%- endif -%}
                      </div>
                    </div>  
                  {%- when 'subscription' -%}
                    {% assign api = settings.subscribe_api %}
                    {% form 'customer', id: 'subscription-contact_form', class: 'subscription-form mt-sm-5 mt-4 as-validate-form as-newsletter-footer', data-action: api, novalidate: 'novalidate', autocomplete: "off" %}
                      {% if block.settings.tags != blank %}
                      <input type="hidden" name="tags" value="{{ block.settings.tags }}">
                      {% endif %}
                      <div class="form-pristine as-section-form subscription-controls">
                        <div class="mb-1 input-pristine d-flex flex-column flex-sm-row">
                          <input class="form-control form-control-lg ps-4 fs-footnote"
                            type="email" {% if api != blank %} name="email" {% else %} name="contact[email]"  {% endif %} id="subscription-{{ formId }}-email"
                            data-pristine-required-message="{{ 'general.subscribe.email_error_message' | t }}"
                            data-pristine-email-message="{{ 'general.subscribe.email_error_message' | t }}"
                            value="{{ form.email }}" placeholder="{{ block.settings.placeholder }}" 
                            aria-describedby="footer-subscribe-button" required>
                          <button class="btn btn-primary mt-2 mt-sm-0" 
                            id="subscription-footer-subscribe-button" type="submit" aria-label="submit">{{ block.settings.button_text }}</button>
                        </div>
                      </div>
                      {% if block.settings.enable_gdpr_policy_checkbox %}
                        <div class="mt-3 form-pristine position-relative">
                          <div class="form-check input-pristine">
                            <input type="checkbox" data-pristine-required-message="{{ 'general.subscribe.policy_error_message' | t }}" id="subscription-privacy_policy" name="privacy_policy" value="privacy_policy" class="form-check-input" required>
                            <label for="subscription-privacy_policy" class="form-check-label fs-footnote richtext-with-link {{ richtext_link_style }}">{{ 'general.subscribe.accept_policy_html' | t }}</label><br>  
                          </div>
                        </div>
                      {% endif %}
                      <!-- <div class="text-success as-success-tips d-none fs-footnote">{{ 'general.subscribe.success_message' | t }}</div> -->
                      <div class="text-danger as-error-tips d-none fs-footnote">{{ 'general.subscribe.error_message' | t }}</div>
                    {% endform %}
                {%- endcase -%}
              {%- endfor -%}
              </div>
            </div>
          </div>
        </div>
      </div>
      {% if section.settings.video_url != blank %}
        <div class="as-video-control video-control d-none">
          <button data-control="pause" class="pause btn p-0 gray-100 mw-auto">
            {% render 'icon-pause-circle' %}
          </button>
          <button data-control="play" class="play btn p-0 gray-100 mw-auto">
            {% render 'icon-play-circle' %}
          </button>
        </div>
      {% endif %}
    </div>
  </div>
  
</div>

{% schema %}
  {
    "name": "Hero video",
    "tag": "section",
    "class": "as-hero-video hero-video-section",
    "settings": [
      {
        "type": "checkbox",
        "id": "enable_transparent_header",
        "label": "Enable transparent header",
        "default": false
      },
      {
        "label": "Desktop video link",
        "type": "text",
        "info": "Supports only .MP4.",
        "id": "video_url",
        "default": "https://cdn.shopify.com/videos/c/o/v/3f19f4dbd5c94fb79607ff79eeee02a6.mp4"
      },
      {
        "label": "Mobile video link",
        "type": "text",
        "info": "Supports only .MP4.",
        "id": "mobile_video_url",
        "default": "https://cdn.shopify.com/videos/c/o/v/141f3bd1687a465689a83c4a20fe99b7.mp4"
      },
      {
        "type": "image_picker",
        "id": "cover_image_on_desktop",
        "label": "Cover image on desktop"
      },
      {
        "type": "image_picker",
        "id": "cover_image_on_mobile",
        "label": "Cover image on mobile"
      },
      {
        "type": "select",
        "id": "desktop_video_height",
        "label": "Desktop video height",
        "options": [
          {
            "value": "adapt_to_screen",
            "label": "Adapt to screen"
          },
          {
            "value": "adapt_to_video",
            "label": "Adapt to video"
          },
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "default": "adapt_to_screen"
      },
      {
        "type": "select",
        "id": "mobile_video_height",
        "label": "Mobile video height",
        "options": [
          {
            "value": "adapt_to_screen",
            "label": "Adapt to screen"
          },
          {
            "value": "adapt_to_video",
            "label": "Adapt to video"
          },
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "default": "adapt_to_screen"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "desktop_text_position",
        "label": "Desktop text position",
        "options": [
          {
            "value": "top_left",
            "label": "Top left"
          },
          {
            "value": "top_center",
            "label": "Top center"
          },
          {
            "value": "top_right",
            "label": "Top right"
          },
          {
            "value": "middle_left",
            "label": "Middle left"
          },
          {
            "value": "middle_center",
            "label": "Middle center"
          },
          {
            "value": "middle_right",
            "label": "Middle right"
          },
          {
            "value": "bottom_left",
            "label": "Bottom left"
          },
          {
            "value": "bottom_center",
            "label": "Bottom center"
          },{
            "value": "bottom_right",
            "label": "Bottom right"
          }
        ],
        "default":   "middle_left"
      },
      {
        "type": "select",
        "id": "mobile_text_position",
        "label": "Mobile text position",
        "options": [
          {
            "value": "top",
            "label": "Top"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "bottom",
            "label": "Bottom"
          }
        ],
        "default": "top"
      },
      {
        "type": "select",
        "id": "text_width",
        "label": "Desktop text width",
        "options": [
          {
            "value": "col-md-8",
            "label": "2/3"
          },
          {
            "value": "col-md-6",
            "label": "1/2"
          },
          {
            "value": "col-md-4",
            "label": "1/3"
          }
        ],
        "default": "col-md-6"
      },
      {
        "type": "select",
        "id": "desktop_text_alignment",
        "label": "Desktop text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ],
        "default": "left"
      },
      {
        "type": "select",
        "id": "mobile_text_alignment",
        "label": "Mobile text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ],
        "default": "center"
      },
      {
        "type": "range",
        "id": "text_shadow_ammount",
        "min": 0,
        "max": 100,
        "step": 20,
        "default": 0,
        "unit": "%",
        "label": "Text shadow ammount"
      }
    ],
    "blocks": [
      {
        "type": "overline",
        "name": "Overline",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "overline",
            "default": "Overline",
            "label": "Overline"
          }
        ]
      },
      {
        "type": "heading",
        "name": "Heading",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "default": "Hero video",
            "label": "Heading"
          }
        ]
      },
      {
        "type": "subline",
        "name": "Subline",
        "limit": 1,
        "settings": [
          {
            "type": "richtext",
            "id": "subline",
            "default": "<p>Subline</p>",
            "label": "Subline"
          }
        ]
      },
      {
        "type": "text",
        "name": "Description",
        "limit": 1,
        "settings": [
          {
            "type": "richtext",
            "id": "text",
            "default": "<p>Share your brand story by adding a video to your store</p>",
            "label": "Description"
          }
        ]
      },
      {
        "type": "button",
        "name": "Button",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "button_label_1",
            "default": "Button label",
            "label": "Primary button label"
          },
          {
            "type": "url",
            "id": "button_link_1",
            "label": "Primary button link"
          },
          {
            "type": "text",
            "id": "button_label_2",
            "default": "Button label",
            "label": "Secondary button label"
          },
          {
            "type": "url",
            "id": "button_link_2",
            "label": "Secondary button link"
          },
          {
            "type": "select",
            "id": "button_set_style",
            "label": "Button set style",
            "options": [
              {
                "value": "solid_with_outline",
                "label": "Solid button with Outlined button"
              },
              {
                "value": "solid_with_text_link",
                "label": "Solid button with Text link"
              },
              {
                "value": "outline",
                "label": "Outlined button"
              },
              {
                "value": "outline_with_text_link",
                "label": "Outlined button with Text link"
              }, {
                "value": "text_link",
                "label": "Text link"
              }
            ],
            "default": "solid_with_outline"
          } 
        ]
      }
      // {
      //   "type": "image",
      //   "name": "Image",
      //   "limit": 1,
      //   "settings": [
      //     {
      //       "label": "Desktop Image",
      //       "type": "image_picker",
      //       "info": ".png recommended and must use double graph",
      //       "id": "desktop_image"
      //     },
      //     {
      //       "label": "Mobile Image",
      //       "type": "image_picker",
      //       "info": ".png recommended and must use double graph",
      //       "id": "mobile_image"
      //     },
      //     {
      //       "type": "range",
      //       "id": "image_rate",
      //       "min": 50,
      //       "max": 100,
      //       "step": 1,
      //       "unit": "%",
      //       "label": "Image rotio in desktop",
      //       "info": "The ratio of the image to the container",
      //       "default": 70
      //     }
      //   ]
      // },
      // {
      //   "type": "subscription",
      //   "name": "Subscription",
      //   "limit": 1,
      //   "settings": [
      //     {
      //       "type": "text",
      //       "id": "tags",
      //       "label": "Input Tags"
      //     },
      //     {
      //       "type": "text",
      //       "id": "placeholder",
      //       "default": "Sign up with Email",
      //       "label": "Placeholder"
      //     },
      //     {
      //       "type": "text",
      //       "id": "button_text",
      //       "default": "Subscribe",
      //       "label": "Button text"
      //     },
      //     {
      //       "type": "checkbox",
      //       "id": "enable_gdpr_policy_checkbox",
      //       "label": "Enable GDPR policy checkbox",
      //       "default": false
      //     }
      //   ]
      // }
    ],
    "presets": [
      {
        "name": "Hero video",
        "blocks": [
          {
            "type": "overline"
          },
          {
            "type": "heading"
          },
          {
            "type": "subline"
          },
          {
            "type": "text"
          },
          {
            "type": "button"
          }
        ]
      }
    ]
  }
{% endschema %}